<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import darkTheme from '@/composables/darkThemeUtils'
import switchButton from '@/components/switchButton.vue'
darkTheme.initTheme()
const toggleDarkMode = () => darkTheme.toggleMode()
</script>

<template>
  <button
    class="tw-w-10 tw-rounded-full tw-flex tw-justify-around tw-bg-[#8e96aa24] tw-border-2 tw-border-neutral-300 hover:tw-border-neutral-800 dark:tw-border-gray-600 dark:hover:tw-border-gray-300"
    @click="toggleDarkMode"
  >
    <i
      class="iconfont icon-sun tw-text-base/[1rem] tw-text-[20px] tw-rounded-full tw-opacity-100 tw-bg-white tw-border-white dark:tw-opacity-0 toggle-transition"
    ></i>
    <i
      class="iconfont icon-moon tw-text-base/[1rem] tw-text-[20px] tw-rounded-full tw-opacity-0 tw-bg-black dark:tw-opacity-100 toggle-transition"
    ></i>
  </button>
  <switchButton />
  <!-- 1. 暗黑模式切换按钮（固定在右上角，全局可见） -->
  <!-- <div class="tw-w-40 tw-h-8 tw-bg-white dark:tw-bg-gray-500 dark:tw-text-gray-50">内容</div> -->
  <!-- <div class="tw-w-40 tw-h-8 tw-bg-white dark:tw-bg-gray-500">内容</div> -->
</template>

<style>
@media (min-width: 1024px) {
  #app {
    display: flex;
    place-items: center;
  }
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }

  nav {
    text-align: left;
    margin-left: -1rem;
    font-size: 1rem;

    padding: 1rem 0;
    margin-top: 1rem;
  }
}
</style>
